﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Checkout with PayPal Demo</title>

        <!--Including Bootstrap style files-->
        <link href="css/bootstrap.min.css" rel="stylesheet" />

        <style>
            tr {
                line-height: 30px;
            }
            td {
                padding: 5px;
            }

            .divBorder {
	            margin-top:10px;
	            border: #eeeeee medium solid;
	            border-radius: 10px;
	            -moz-border-radius: 10px;
	            -webkit-border-radius: 10px;
                padding: 15px;
            }
            .wSmall {
                width: 120px;
            }
        </style>

    </head>
    
    <body>
        <div class="container-fluid">

            <div class="well">
                <h2 class="text-center">PayPal Checkout REST API Demo</h2>
            </div>


            <div class="row">

                <div class="col-sm-6 col-md-4 col-lg-3" >
                    <div class="divBorder" style="height: 600px;"> 
                        <h3>Digital SLR Camera </h3>
                        <div>
                            <img src="img/camera.png" width="200" height="150"/>
                        </div>

                        <h3>Sample Sandbox Buyer Accounts</h3>
                        <table class="table table-striped">
                            <tr><th>Buyer Email</th><th>Password</th></tr>
                            <tr><td>emily_doe@buyer.com</td><td>qwer1234</td></tr>
                            <tr><td>bill_bong@buyer.com</td><td>qwer1234</td></tr>
                            <tr><td>jack_potter@buyer.com</td><td>123456789</td></tr>
                            <tr><td>harry_doe@buyer.com</td><td>123456789</td></tr>
                            <tr><td>ron_brown@buyer.com</td><td>qwer1234</td></tr>
                            <tr><td>bella_brown@buyer.com</td><td>qwer1234</td></tr>
                        </table>
                    </div>
                </div>

                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="divBorder" style="height: 600px;"> 
                        <h3> Pricing Details </h3>
                        <form action="StartPayment.aspx" method="post">
                             <input type="hidden" name="csrf" value="<%= Session["csrf"] %>" />
                             <table>
                                 <tr><td>Camera </td><td><input class="form-control wSmall" type="text" name="camera_amount" value="300" readonly="readonly" /></td></tr>
                                 <tr><td>Tax </td><td><input class="form-control wSmall" type="text" name="tax" value="5" readonly="readonly" /></td></tr>
                                 <tr><td>Insurance </td><td><input class="form-control wSmall" type="text" name="insurance" value="10" readonly="readonly" /></td></tr>
                                 <tr><td>Handling Fee </td><td><input class="form-control wSmall" type="text" name="handling_fee" value="5" readonly="readonly" /></td></tr>
                                 <tr><td>Estimated Shipping </td><td><input class="form-control wSmall" type="text" name="estimated_shipping" value="2" readonly="readonly" /></td></tr>
                                 <tr><td>Shipping Discount </td><td><input class="form-control wSmall" type="text" name="shipping_discount" value="-2" readonly="readonly" /></td></tr>
                                 <tr><td>Total Amount </td><td><input class="form-control wSmall" type="text" name="total_amount" value="320" readonly="readonly" /></td></tr>
                                 <tr><td>Currency</td><td>
                                    <select class="form-control" name="currencyCodeType">
                        			    <option value="AUD">AUD</option>
                        			    <option value="BRL">BRL</option>
                        			    <option value="CAD">CAD</option>
                        			    <option value="CZK">CZK</option>
                        			    <option value="DKK">DKK</option>
                        			    <option value="EUR">EUR</option>
                        			    <option value="HKD">HKD</option>
                        			    <option value="MYR">MYR</option>
                        			    <option value="MXN">MXN</option>
                        			    <option value="NOK">NOK</option>
                        			    <option value="NZD">NZD</option>
                        			    <option value="PHP">PHP</option>
                        			    <option value="PLN">PLN</option>
                        			    <option value="GBP">GBP</option>
                        			    <option value="RUB">RUB</option>
                        			    <option value="SGD">SGD</option>
                        			    <option value="SEK">SEK</option>
                        			    <option value="CHF">CHF</option>
                        			    <option value="THB">THB</option>
                        			    <option value="USD" selected="selected">USD</option>
                                    </select>
                                 </td></tr>

                             </table>

                            <br/>
                            <!--Container for Checkout with PayPal button-->
                            <div id="myContainer"></div>
                            <br/>
                            <span style="margin-left:60px">OR</span>
                            <br/><br/>
                            <div>
                                <button class="btn btn-primary" formaction="Shipping.aspx" role="button">Proceed to Checkout</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-sm-12 col-md-4 col-lg-6">
                    <div class="divBorder"> 
                        <h4>README</h4>
                    
                        <h5>BEFORE YOU GET STARTED</h5>
                    
                        This code sample demonstrates the Express Checkout flow called In-Context Checkout. You need to meet the <a href="https://developer.paypal.com/docs/classic/express-checkout/in-context/#eligibility" target="_blank">eligibility criteria </a> to determine whether your integration will be a good candidate for the In-Context Checkout experience option. 
                        <br />

                        <h5> PRE-READ</h5>

                        <ol>
                            <li>
                                Click on the ‘PayPal Check Out’ button or "Proceed to Checkout" button to see the experience. 
                            </li>
                            <li>
                                If you get any Firewall warning, add rule to the Firewall to allow incoming connections for your application.
                            </li>
                            <li>
                                Checkout with PayPal using a Sandbox Buyer account provided on this page, and you're done!
                            </li>
                            <li>
                                The sample code uses default sandbox REST App credentials which are set in PayPal.config. You can get your own REST app credentials by creating a REST app with the steps outlined  <i><a href="https://developer.paypal.com/docs/integration/direct/make-your-first-call/#create-a-paypal-app" target="_blank">here</a></i>.
                            </li>
                            <li>
                                Make following changes in PayPal.config:
                                <ul>
                                    <li>
                                        If using your own Sandbox Seller account, update MERCHANT_ID with your merchant id. To get your merchant id, log into your <a href="https://www.sandbox.paypal.com/" target="_blank">Sandbox</a> or <a href="https://www.paypal.com" target="_blank">Live</a> business account as per the integration. The merchant ID can be found under My Account &gt; Profile &gt; My business info &gt; Merchant account ID.
                                    </li>
                                    <li>
                                        Also, update SANDBOX_CLIENT_ID and SANDBOX_CLIENT_SECRET values with your REST app Sandbox Seller credentials.
                                    </li>
                                    <li>
                                        SANDBOX_FLAG: Kept true for working with Sandbox, it will be false for live.
                                    </li>
                                </ul>
                            </li>
                        </ol>

                        <h4>
                             Demo flows
                        </h4>

                        Two flows using In-Context are demonstrated: a shortcut flow, and another that allows the customer to provide alternate shipping information.

                        <h5>
                            PayPal Check Out (shortcut flow)
                        </h5>
                        <ol>
                            <li>Click PayPal Check Out (Index.aspx)</li>
                            <li>PayPal lightbox opens (StartPayment.aspx)</li>
                            <li>Select shipping method (PlaceOrder.aspx)</li>
                            <li>Receive confirmation (Pay.aspx)</li>
                        </ol>
                         <h5>
                            Proceed to Checkout (allows manual input of shipping address)
                        </h5>
                        <ol>               
                            <li>Click PayPal Check Out (Index.aspx)</li>
                            <li>Provide shipping information and click Place Order (Shipping.aspx)</li>
                            <li>PayPal lightbox opens (StartPayment.aspx)</li>
                            <li>Select shipping method (PlaceOrder.aspx)</li>
                            <li>Receive confirmation (Pay.aspx)</li>
                        </ol>

                        <h4 id="incontext">
                             In-Context Checkout REST integration steps
                        </h4>
                        <ol>
                            <li>
                                Learn about the <a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/in-context-checkout-overview/"> In-Context Checkout flow</a>.
                            </li>

                                                    <li>
                                Meet the <a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/prerequisites/"> prerequisites</a>.
                            </li>

                            <li>
                                Copy the html form to your checkout page. Note the id of the form (myContainer).
                            </li>
                        </ol>

                        <pre><code>&lt;form id=&quot;myContainer&quot; action=&quot;StartPayment.aspx&quot; method=&quot;POST&quot;&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;csrf&quot; value=&quot;&lt;%= Session["csrf"] %&gt;&quot; /&gt;
        Camera:&lt;input type=&quot;text&quot; name=&quot;camera_amount&quot; value=&quot;300&quot; readonly /&gt;&lt;br /&gt;
        Tax:&lt;input type=&quot;text&quot; name=&quot;tax&quot; value=&quot;5&quot; readonly /&gt;&lt;br /&gt;
        Insurance:&lt;input type=&quot;text&quot; name=&quot;insurance&quot; value=&quot;10&quot; readonly /&gt;&lt;br /&gt;
        Handling:&lt;input type=&quot;text&quot; name=&quot;handling_fee&quot; value=&quot;5&quot; readonly /&gt;&lt;br /&gt;
        Est. Shipping:&lt;input type=&quot;text&quot; name=&quot;estimated_shipping&quot; value=&quot;2&quot; readonly /&gt;&lt;br /&gt;
        Shipping Discount:&lt;input type=&quot;text&quot; name=&quot;shipping_discount&quot; value=&quot;-2&quot; readonly /&gt;&lt;br /&gt;
        Total:&lt;input type=&quot;text&quot; name=&quot;total_amount&quot; value=&quot;320&quot; readonl /&gt;&lt;br /&gt;
        Currency:&lt;input type=&quot;text&quot; name=&quot;currencyCodeType&quot; value=&quot;USD&quot; readonly /&gt;&lt;br /&gt;
    &lt;/form&gt;</code></pre>
                        <ol start="4">
                            <li>
                                 Include the following JavaScript in your checkout page. The setup call automatically populates and displays the PayPal Check Out button in your container. In this example, the container is the form itself.
                            </li>
                        </ol>

                        <pre><code>&lt;script type="text/javascript"&gt;
        window.paypalCheckoutReady = function () {
            paypal.checkout.setup('Your merchant id', {
                container: 'myContainer', //{String|HTMLElement|Array} where you want the PayPal button to reside
                environment: 'sandbox' //or 'production' depending on your environment
            });
        };
    &lt;/script&gt;
    &lt;script src="//www.paypalobjects.com/api/checkout.js" async&gt;&lt;/script&gt;</code></pre>

                        <ol start="5">
                            <li>
                                Place code on your server to create Express Checkout payments using the REST API.  Review this demonstration and the source code in this project to get started (see README.md).
                        
                                <ul>
                                    <li>
                                        <a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/get-payment-approval/">Get payment approval</a> from the buyer.
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/show-payment-details/">Show payment details</a> to the buyer on the confirmation page. (Optional)
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/execute-payments"> Execute</a> the payment.
                                    </li>
                                </ul>
                        
                            </li>

                        </ol>
                    </div>
                </div>

            </div>

        </div>

        <br />

        <!-- PayPal In-Context Checkout script -->
        <script type="text/javascript">
            window.paypalCheckoutReady = function () {
                paypal.checkout.setup('<%= ConfigurationManager.AppSettings["MERCHANT_ID"] %>', {
                    container: 'myContainer', //{String|HTMLElement|Array} where you want the PayPal button to reside
                    environment: '<%= environment %>' //or 'production' depending on your environment
                });
            };
        </script>

        <script src="//www.paypalobjects.com/api/checkout.js" async="async"></script>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery-1.11.3.min.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>

</html>
